<template>
	<view class="container">
		<my-scroll-tab :list="cate_list" bgColor="#fff" :current="currentIndex" @itemClick='itemClick'></my-scroll-tab>
		<scroll-view scroll-y="true" class="items" v-if="ry_list.length>0" @scrolltolower="loadMore">
			<view style="height: 20rpx;"></view>
			<my-ry-items bgColor="#fff" :list='ry_list' @itemClick="ryItemClick" @btnClick="ryItemClick"></my-ry-items>
			<u-loadmore :status="hasMore?'loading':'nomore'" />
		</scroll-view>
		<view class="empty-container" v-else>
			<u-empty text="暂无相关内容" :icon="emptyIcon"/>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				currentIndex:0,
				emptyIcon:'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/empty.png',
				hasMore:true,
				cate_id:0,
				//页数
				pageIndex:1,
				ry_list:[],
				cate_list:[],
			};
		},
		methods: {
			loadMore(){
				if(_this.hasMore){
					_this.pageIndex++
					_this.get_list()
				}
			},
			itemClick(index){
				_this.cate_id=_this.cate_list[index]['id']
				_this.pageIndex=1
				_this.ry_list=[]
				_this.get_list()
			},
			ryItemClick(item){
				uni.navigateTo({
					url:`/pages/foster/foster-detail?id=${item.goods_id}`
				})
			},
			async get_cates(){
				const params = {}
				const data = await _this.$post('api/get_ry_cates',params)
				if(data.code==200){
					this.cate_list=data.data.list
					if(_this.cate_list.length>0){
						_this.cate_id=_this.cate_list[0]['id']
						_this.get_list()
					}else{
						_this.get_list()
					}
				}
			},
			async get_list(){
				const params = {
					pageIndex: this.pageIndex,
					pageSize:20,
					is_recommend:1,
					cate_id:_this.cate_id,
				}
				const data = await _this.$post('api/get_ry_goods',params)
				if(data.code==200){
					this.ry_list.push(...data.data.list)
					this.hasMore=data.data.list.length>=20
				}else{
					this.hasMore=false
				}
			},
		},
		onLoad(e) {
			_this = this;
			_this.get_cates()
		},
		onShow() {

		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		padding: 0;
		.items{
			height: calc(100% - 80rpx);
			box-sizing: border-box;
		}
	}
</style>